﻿@model NavigatorBarModel
@{
    Layout = "_Default";
}
@section css {
    <style>
        #main2 {
            width: 100%;
            height: 430px;
            margin-top: 20px;
        }

        #main3 {
            width: 100%;
            height: 430px;
            margin-top: 20px;
        }

        @@media (min-width: 769px) {
            #main2 {
                width: 45%;
                height: 430px;
                margin-top: 20px;
                float: left;
            }

            #main3 {
                width: 45%;
                height: 430px;
                margin-top: 20px;
                float: left;
            }
        }
    </style>
}
@section javascript {
    <script src="~/node_modules/echarts/dist/echarts.min.js"></script>
    <script>
        // 基于准备好的dom，初始化echarts实例
        var Chart1 = echarts.init(document.getElementById('main1'));
        var Chart2 = echarts.init(document.getElementById('main2'));
        var Chart3 = echarts.init(document.getElementById('main3'));

        function ChartGroup(data) {

            option1 = {
                title: {
                    text: '本周设备故障发生次数统计',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: data
            };

            Chart1.setOption(option1);
        }

        function ChartErrorType(data) {
            option2 = {
                title: {
                    text: '本月设备故障类型统计',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br />{b} : {c} ({d}%)"
                },
                series: [
                    {
                        name: '发生次数',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: data,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            Chart2.setOption(option2);
        }

        function ChartError(data) {
            option3 = {
                title: {
                    text: '本月设备故障次数统计',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br />{b} : {c} ({d}%)"
                },
                series: [
                    {
                        name: '故障次数',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: data,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            Chart3.setOption(option3);
        }

        $.ajax({
            url: '/api/ReportForms/1',
            type: "get",
            contentType: 'application/json',
            success: function (res) {
                if (res.state == 200) {
                    ChartError(res.data);
                }
                else {

                    toastr.error(res.message);
                }
            },
            error: function (e) {
                toastr.error(e.responseText);
            }
        });

        $.ajax({
            url: '/api/ReportForms/2',
            type: "get",
            contentType: 'application/json',
            success: function (res) {
                if (res.state == 200) {
                    ChartErrorType(res.data);
                }
                else {

                    toastr.error(res.message);
                }
            },
            error: function (e) {
                toastr.error(e.responseText);
            }
        });

        $.ajax({
            url: '/api/ReportForms',
            type: "get",
            contentType: 'application/json',
            success: function (res) {
                if (res.state == 200) {
                    ChartGroup(res.data);
                }
                else {

                    toastr.error(res.message);
                }
            },
            error: function (e) {
                toastr.error(e.responseText);
            }
        });

        $("#main1").resize(function () {
            Chart1.resize();
            Chart2.resize();
            Chart3.resize();
        });
    </script>
}

<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">故障统计</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="@CoreConfiguration.DefaultMain">首页</a></li>
                    <li class="breadcrumb-item active">故障统计</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">周故障统计</div>
    <div class="card-body" data-toggle="LgbValidate" data-valid-button="#btnSaveDisplayName">
        <div id="main1" style="width:100%;height:430px;margin-top:20px;"></div>
    </div>
</div>
<div class="card">
    <div class="card-header">月故障统计</div>
    <div class="card-body" data-toggle="LgbValidate" data-valid-button="#btnSaveDisplayName">
        <div id="main2"></div>
        <div id="main3"></div>
    </div>
</div>